<template>
  <div class="goods-list">
    <div class="goods-list-item" v-for="good in goodslist" :key="good.id">
      <img :src="good.img_url" alt />
      <h1 class="title">{{good.title}}</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥{{good.sell_price}}</span>
          <span class="old">￥{{good.market_price}}</span>
        </p>
        <p class="sell">
          <span class="now">热卖中</span>
          <span class="old">剩余{{good.stack_quantity}}件</span>
        </p>
      </div>
    </div>
    <van-button type="danger" class="btn" @click="getMore">{{text}}</van-button>
  </div>
</template>
<script>
export default {
  data: () => ({
    goodslist: [],
    pageindex: 0,
    hasFlag: true
  }),
  created () {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList () {
      if (this.hasFlag !== true) return
      this.pageindex++
      const {
        data: { status, message, count }
      } = await this.$http.get(`/api/getgoods?pageindex=${this.pageindex}`)
      if (status !== 0) return this.$Toast(message)
      console.log(message)
      this.goodslist = this.goodslist.concat(message)
      this.hasFlag = this.pageindex * 3 < count
      console.log(this.hasFlag)
    },
    getMore () {
      this.getGoodsList()
    }
  },
  computed: {
    text () {
      return this.hasFlag !== true ? '被掏空了' : '加载更多'
    }
  }
}
</script>
<style lang="less" scoped>
.goods-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  justify-content: space-between;
  .goods-list-item {
    margin-top: 10px;
    padding: 6px;
    width: 48%;
    border: 1px solid #ccc;
    box-shadow: 0 0 3px #ccc;
    box-sizing: border-box;
    img {
      width: 100%;
    }
    .title {
      font-size: 16px;
    }
    .info {
      .price {
        margin: 0;
        padding: 4px;
        font-size: 11px;
        .now {
          color: red;
        }
        .old {
          margin-left: 10px;
          text-decoration: line-through;
        }
      }
      .sell {
        margin: 0;
        background: #ccc;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .btn {
    width: 100%;
  }
}
</style>
